<template>
  <view class="detail-container">
    <!-- 状态栏占位 -->
    <view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
    
    <!-- 顶部导航栏 -->
    <view class="top-nav">
      <view class="nav-left" @click="goBack">
        <text class="back-icon">←</text>
      </view>
      <view class="nav-center">
        <text class="nav-title">拼单详情</text>
      </view>
      <view class="nav-right"></view>
    </view>
    
    <!-- 加载状态 -->
    <view v-if="loading" class="loading-container">
      <text class="loading-text">正在加载拼单详情...</text>
    </view>
    
    <!-- 拼单详情内容 -->
    <view v-else class="detail-content">
      <!-- 成团成功横幅 -->
      <view v-if="activityDetail.status === 'success'" class="success-banner">
        <view class="banner-icon">🎉</view>
        <view class="banner-content">
          <text class="banner-title">拼单已成功！</text>
          <text class="banner-subtitle">订单已自动生成，请尽快支付</text>
        </view>
        <button class="banner-btn" @click="goToMyOrders">
          <text class="banner-btn-text">查看订单</text>
        </button>
      </view>
      
      <!-- 拼单状态卡片 -->
      <view class="status-card">
        <view class="status-header">
          <view class="status-badge" :class="'status-' + activityDetail.status">
            <text class="status-text">{{ activityDetail.statusText }}</text>
          </view>
          <view class="countdown" v-if="activityDetail.status === 'active'">
            <text class="countdown-label">剩余时间：</text>
            <text class="countdown-time">{{ remainingTime }}</text>
          </view>
        </view>
        
        <view class="progress-section">
          <view class="progress-info">
            <text class="progress-text">
              已有 <text class="highlight">{{ activityDetail.currentParticipants }}</text> 人参与，
              还差 <text class="highlight">{{ activityDetail.remainingSlots }}</text> 人成团
            </text>
          </view>
          <view class="progress-bar-wrapper">
            <view class="progress-bar">
              <view class="progress-fill" :style="{ width: activityDetail.progress + '%' }"></view>
            </view>
            <text class="progress-percent">{{ activityDetail.progress }}%</text>
          </view>
        </view>
      </view>
      
      <!-- 商品信息卡片 -->
      <view class="food-card">
        <image :src="activityDetail.foodImage" mode="aspectFill" class="food-image" />
        <view class="food-info">
          <text class="food-name">{{ activityDetail.foodName }}</text>
          <text class="merchant-name">{{ activityDetail.merchantName }}</text>
          <view class="price-row">
            <view class="group-price-section">
              <text class="label">拼单价</text>
              <text class="group-price">¥{{ activityDetail.groupPrice }}</text>
            </view>
            <view class="original-price-section" v-if="activityDetail.originalPrice">
              <text class="original-price">原价 ¥{{ activityDetail.originalPrice }}</text>
              <text class="save-amount">省¥{{ (activityDetail.originalPrice - activityDetail.groupPrice).toFixed(2) }}</text>
            </view>
          </view>
        </view>
      </view>
      
      <!-- 拼单信息 -->
      <view class="activity-info-card">
        <view class="card-title">拼单信息</view>
        <view class="info-item">
          <text class="info-label">拼单标题</text>
          <text class="info-value">{{ activityDetail.title }}</text>
        </view>
        <view class="info-item" v-if="activityDetail.description">
          <text class="info-label">活动描述</text>
          <text class="info-value">{{ activityDetail.description }}</text>
        </view>
        <view class="info-item">
          <text class="info-label">成团人数</text>
          <text class="info-value">{{ activityDetail.minParticipants }}-{{ activityDetail.maxParticipants }}人</text>
        </view>
      </view>
      
      <!-- 参与者列表 -->
      <view class="participants-card">
        <view class="card-title">参与成员 ({{ activityDetail.currentParticipants }}/{{ activityDetail.maxParticipants }})</view>
        <view class="participants-list">
          <view 
            class="participant-item" 
            v-for="(participant, index) in activityDetail.participants" 
            :key="participant.id"
          >
            <view class="participant-left">
              <image :src="participant.userAvatar" mode="aspectFill" class="participant-avatar" />
              <view class="participant-info">
                <text class="participant-name">{{ participant.userName }}</text>
                <text class="participant-time">{{ formatJoinTime(participant.joinedAt) }}</text>
              </view>
            </view>
            <view class="participant-right">
              <view class="badges">
                <text class="participant-badge" v-if="index === 0">团长</text>
                <text class="participant-badge member" v-else>成员</text>
                <text class="order-badge" v-if="activityDetail.status === 'success'">
                  ✅ 已生成订单
                </text>
              </view>
            </view>
          </view>
          
          <!-- 空位占位符 -->
          <view 
            class="participant-item empty" 
            v-for="n in activityDetail.remainingSlots" 
            :key="'empty-' + n"
          >
            <view class="participant-left">
              <view class="participant-avatar placeholder">
                <text class="placeholder-icon">?</text>
              </view>
              <view class="participant-info">
                <text class="participant-name empty">等待参与...</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 底部操作按钮 -->
    <view class="bottom-actions" v-if="!loading">
      <!-- 如果是发起人且拼单活跃，显示取消按钮 -->
      <button 
        v-if="isInitiator && activityDetail.status === 'active'" 
        class="action-btn cancel-btn"
        @click="handleCancelActivity"
      >
        <text class="btn-text">取消拼单</text>
      </button>
      
      <!-- 如果已参与且拼单活跃，显示退出按钮 -->
      <button 
        v-else-if="isParticipated && activityDetail.status === 'active'" 
        class="action-btn leave-btn"
        @click="handleLeaveActivity"
      >
        <text class="btn-text">退出拼单</text>
      </button>
      
      <!-- 如果未参与且拼单活跃，显示参与按钮 -->
      <button 
        v-else-if="!isParticipated && activityDetail.status === 'active' && activityDetail.hasSlots" 
        class="action-btn join-btn"
        @click="handleJoinActivity"
      >
        <text class="btn-text">立即参与 ¥{{ activityDetail.groupPrice }}</text>
      </button>
      
      <!-- 拼单已满或已结束 -->
      <button v-else class="action-btn disabled-btn" disabled>
        <text class="btn-text">{{ getButtonText() }}</text>
      </button>
    </view>
    
    <!-- ⭐ 口味选择半屏弹窗 -->
    <view class="spice-modal-mask" v-if="spiceModalVisible" @click="closeSpiceModal"></view>
    <view class="spice-modal" v-if="spiceModalVisible" @click.stop>
      <view class="spice-header">
        <view class="drag-bar"></view>
        <view class="spice-top">
          <image 
            :src="activityDetail.foodImage || '/static/food1.jpg'" 
            mode="aspectFill" 
            class="spice-thumb" 
          />
          <view class="spice-info-wrap">
            <text class="spice-name">{{ activityDetail.foodName || '商品' }}</text>
            <view class="spice-price-row">
              <text class="spice-price-symbol">¥</text>
              <text class="spice-price-value">{{ activityDetail.groupPrice || '0' }}</text>
              <text class="spice-original" v-if="activityDetail.originalPrice">
                原价 ¥{{ activityDetail.originalPrice }}
              </text>
            </view>
          </view>
        </view>
      </view>

      <view class="spice-body">
        <!-- 口味选择 -->
        <view class="spice-row">
          <text class="spice-label">选择口味</text>
        </view>
        <view class="spice-chips">
          <view 
            v-for="(opt, idx) in spiceOptions" 
            :key="idx" 
            class="spice-chip" 
            :class="{ active: selectedSpiceIndex === idx }"
            @click="selectSpice(idx)"
          >
            {{ opt }}
          </view>
        </view>
      </view>

      <view class="spice-footer">
        <button class="spice-confirm-btn" @click="confirmSpiceAndJoin">
          <text class="spice-confirm-text">确定参与</text>
        </button>
      </view>
    </view>
    
    <!-- 自定义弹窗 -->
    <CustomModal ref="customModal" />
  </view>
</template>

<script>
import groupBuyingService from '../../services/group-buying.js'
import { smartBack } from '../../utils/navigation.js'
import CustomModal from '../../components/CustomModal.vue'

export default {
  components: {
    CustomModal
  },
  data() {
    return {
      statusBarHeight: 0,
      loading: false,
      activityId: null,
      activityDetail: {
        id: null,
        status: 'active',
        statusText: '拼单中',
        currentParticipants: 0,
        maxParticipants: 3,
        remainingSlots: 3,
        progress: 0,
        foodImage: '/static/food1.jpg',
        foodName: '商品名称',
        merchantName: '商家名称',
        groupPrice: 0,
        originalPrice: 0,
        title: '拼单标题',
        description: '',
        minParticipants: 2,
        participants: []
      },
      currentUserId: null,
      isInitiator: false,
      isParticipated: false,
      remainingTime: '00:00:00',
      timer: null,
      isFirstLoad: true,  // 标记是否首次加载
      
      // ⭐ 口味选择
      spiceOptions: ['不辣', '微辣', '中辣', '重辣'],
      spiceModalVisible: false,
      selectedSpiceIndex: 0
    }
  },
  
  onLoad(options) {
    this.getStatusBarHeight()
    
    if (options.id) {
      this.activityId = options.id
      this.loadActivityDetail()
    } else {
      uni.showToast({
        title: '缺少拼单ID',
        icon: 'none'
      })
      setTimeout(() => {
        smartBack('/pages/group-buying/group-buying')
      }, 1500)
    }
    
    // 获取当前用户ID
    const userInfo = uni.getStorageSync('user_info')
    if (userInfo && userInfo.id) {
      this.currentUserId = userInfo.id
    }
  },
  
  onShow() {
    // 页面显示时刷新数据（可能从订单页返回）
    // 避免首次加载时重复请求
    if (this.activityId && !this.isFirstLoad) {
      console.log('从其他页面返回，刷新拼单详情')
      this.loadActivityDetail()
    } else {
      this.isFirstLoad = false
    }
  },
  
  onUnload() {
    // 清除定时器
    if (this.timer) {
      clearInterval(this.timer)
    }
  },
  
  methods: {
    // 获取状态栏高度
    getStatusBarHeight() {
      const systemInfo = uni.getSystemInfoSync()
      this.statusBarHeight = systemInfo.statusBarHeight || 20
      // 设置 CSS 变量，用于固定导航栏定位
      document.documentElement.style.setProperty('--status-bar-height', this.statusBarHeight + 'px')
    },
    
    // 加载拼单活动详情
    async loadActivityDetail() {
      if (!this.activityId || this.loading) return
      
      this.loading = true
      
      try {
        console.log('加载拼单详情 - ID:', this.activityId)
        
        // 获取拼单详情
        const response = await groupBuyingService.getActivityDetail(this.activityId)
        console.log('拼单详情响应:', response)
        
        const activity = response?.data || response
        
        // 格式化详情数据
        this.activityDetail = groupBuyingService.formatActivityDetail(activity)
        
        // 判断当前用户是否是发起人或参与者
        if (this.currentUserId) {
          this.isInitiator = this.activityDetail.initiatorUserId == this.currentUserId
          this.isParticipated = this.activityDetail.participants.some(
            p => p.userId == this.currentUserId
          )
        }
        
        // 如果拼单活跃，开始倒计时
        if (this.activityDetail.status === 'active') {
          this.startCountdown()
        }
        
        // 如果拼单成功且用户参与了，检查是否需要支付
        if (this.activityDetail.status === 'success' && this.isParticipated) {
          this.checkAndHandleSuccessfulGroup()
        }
        
        console.log('拼单详情加载成功:', this.activityDetail)
      } catch (error) {
        console.error('加载拼单详情失败:', error)
        this.$refs.customModal.show({
          type: 'danger',
          title: '加载失败',
          content: error.message || '无法加载拼单详情',
          showCancel: false,
          confirmText: '知道了',
          onConfirm: () => {
            smartBack('/pages/group-buying/group-buying')
          }
        })
      } finally {
        this.loading = false
      }
    },
    
    // 开始倒计时
    startCountdown() {
      // 清除旧的定时器
      if (this.timer) {
        clearInterval(this.timer)
      }
      
      // 更新倒计时
      const updateCountdown = () => {
        const remaining = groupBuyingService.calculateRemainingTime(this.activityDetail.endTime)
        this.remainingTime = remaining.text
        
        if (remaining.isExpired) {
          clearInterval(this.timer)
          this.activityDetail.status = 'failed'
          this.activityDetail.statusText = '已过期'
        }
      }
      
      // 立即执行一次
      updateCountdown()
      
      // 每秒更新一次
      this.timer = setInterval(updateCountdown, 1000)
    },
    
    // 参与拼单（打开口味选择弹窗）
    handleJoinActivity() {
      // 检查登录
      const token = uni.getStorageSync('jwt_token')
      if (!token) {
        uni.showToast({
          title: '请先登录',
          icon: 'none'
        })
        setTimeout(() => {
          uni.navigateTo({
            url: '/pages/login/login'
          })
        }, 1500)
        return
      }
      
      // 检查是否可以参与
      const canJoin = groupBuyingService.canJoinActivity(this.activityDetail, this.currentUserId)
      if (!canJoin.can) {
        uni.showToast({
          title: canJoin.reason,
          icon: 'none'
        })
        return
      }
      
      // 验证必要数据
      const merchantId = this.activityDetail.merchantId || this.activityDetail.merchant_id
      const foodId = this.activityDetail.foodId || this.activityDetail.food_id
      
      if (!merchantId || !foodId) {
        uni.showToast({
          title: '拼单数据不完整',
          icon: 'error'
        })
        return
      }
      
      // ⭐ 打开口味选择弹窗
      this.selectedSpiceIndex = 0 // 默认选择第一个口味
      this.spiceModalVisible = true
    },
    
    // ⭐ 选择口味
    selectSpice(index) {
      this.selectedSpiceIndex = index
    },
    
    // ⭐ 确认口味并参与拼单
    confirmSpiceAndJoin() {
      const spiceLevel = this.spiceOptions[this.selectedSpiceIndex]
      
      // 关闭弹窗
      this.spiceModalVisible = false
      
      // 跳转到订单确认页，携带参与拼单参数和口味
      const merchantId = this.activityDetail.merchantId || this.activityDetail.merchant_id
      const foodId = this.activityDetail.foodId || this.activityDetail.food_id
      const totalPrice = parseFloat(this.activityDetail.groupPrice || 0).toFixed(2)
      
      console.log('参与拼单 - 跳转到订单页，口味:', spiceLevel)
      
      uni.navigateTo({
        url: `/pages/order/order?` +
             `type=join_group` +
             `&activityId=${this.activityId}` +
             `&foodId=${foodId}` +
             `&merchantId=${merchantId}` +
             `&name=${encodeURIComponent(this.activityDetail.foodName || '商品')}` +
             `&image=${encodeURIComponent(this.activityDetail.foodImage || '/static/food1.jpg')}` +
             `&price=${this.activityDetail.groupPrice}` +
             `&storeName=${encodeURIComponent(this.activityDetail.merchantName || '商家')}` +
             `&quantity=1` +
             `&spice=${encodeURIComponent(spiceLevel)}` +
             `&totalPrice=${totalPrice}` +
             `&deliveryFee=${this.activityDetail.deliveryFee || 0}`  // ⭐ 传递配送费
      })
    },
    
    // ⭐ 关闭口味弹窗
    closeSpiceModal() {
      this.spiceModalVisible = false
    },
    
    // 退出拼单
    async handleLeaveActivity() {
      this.$refs.customModal.show({
        type: 'warning',
        title: '确认退出',
        content: '确定要退出此拼单吗？',
        confirmText: '确认退出',
        cancelText: '取消',
        onConfirm: async () => {
            try {
              console.log('退出拼单 - ID:', this.activityId)
              
              const response = await groupBuyingService.leaveActivity(this.activityId)
              
              console.log('退出拼单成功 - 响应:', response)
              
              uni.showToast({
                title: '已退出拼单',
                icon: 'success'
              })
              
              // 退出成功后返回拼单列表（因为用户已经不是参与者了）
              setTimeout(() => {
                smartBack('/pages/group-buying/group-buying')
              }, 1500)
              
            } catch (error) {
              console.error('退出拼单失败:', error)
              
              // 处理已经退出的情况
              if (error.message && error.message.includes('已经取消参与')) {
                this.$refs.customModal.show({
                  type: 'info',
                  title: '提示',
                  content: '您已经退出了此拼单',
                  showCancel: false,
                  confirmText: '知道了',
                  onConfirm: () => {
                    // 返回拼单列表
                    smartBack('/pages/group-buying/group-buying')
                  }
                })
              } else {
                this.$refs.customModal.show({
                  type: 'danger',
                  title: '退出失败',
                  content: error.message || '退出拼单失败，请稍后重试',
                  showCancel: false,
                  confirmText: '知道了'
                })
              }
            }
        }
      })
    },
    
    // 取消拼单（发起人专用）
    async handleCancelActivity() {
      // 检查是否有人已支付
      const hasPaidParticipants = this.activityDetail.participants.some(
        p => p.status === 'paid'
      )
      
      let content = '取消拼单后，所有参与者将收到通知。'
      if (hasPaidParticipants) {
        content += '\n\n⚠️ 注意：已有成员支付，取消后会自动退款。'
      }
      content += '\n\n确定要取消吗？'
      
      this.$refs.customModal.show({
        type: 'danger',
        title: '确认取消拼单',
        content,
        confirmText: '确认取消',
        cancelText: '再想想',
        onConfirm: async () => {
            try {
              console.log('取消拼单 - ID:', this.activityId)
              
              // 调用取消接口
              const response = await groupBuyingService.cancelActivity(this.activityId, '发起人主动取消')
              
              console.log('取消拼单成功 - 响应:', response)
              
              uni.showToast({
                title: '取消拼单成功',
                icon: 'success'
              })
              
              // 延迟后返回拼单列表
              setTimeout(() => {
                smartBack('/pages/group-buying/group-buying')
              }, 1500)
              
            } catch (error) {
              console.error('取消拼单失败:', error)
              
              this.$refs.customModal.show({
                type: 'danger',
                title: '取消失败',
                content: error.message || '取消拼单失败，请稍后重试',
                showCancel: false,
                confirmText: '知道了'
              })
            }
        }
      })
    },
    
    // 检查并处理拼单成功
    async checkAndHandleSuccessfulGroup() {
      // 查找当前用户的参与记录
      const myParticipation = this.activityDetail.participants.find(
        p => p.userId == this.currentUserId
      )
      
      if (!myParticipation) return
      
      // 如果已经支付过了，不再提示
      if (myParticipation.status === 'paid') {
        return
      }
      
      // 显示拼单成功提示和支付引导
      this.$refs.customModal.show({
        type: 'success',
        title: '🎉 拼单成功',
        content: '恭喜！拼单已成功，现在可以进行支付啦！',
        confirmText: '立即支付',
        cancelText: '稍后支付',
        onConfirm: () => {
          // 跳转到我的订单页面，让用户找到对应订单支付
          // 注意：这里假设后端已经为参与者创建了订单
          uni.showToast({
            title: '正在跳转订单页面...',
            icon: 'loading',
            duration: 1500
          })
          
          setTimeout(() => {
            uni.redirectTo({
              url: '/pages/orders/orders?filter=pending'
            })
          }, 1500)
        },
        onCancel: () => {
          uni.showToast({
            title: '记得及时支付哦',
            icon: 'none'
          })
        }
      })
    },
    
    // 格式化参与时间
    formatJoinTime(time) {
      if (!time) return ''
      
      const date = new Date(time)
      const now = new Date()
      const diff = now - date
      
      const minutes = Math.floor(diff / 60000)
      const hours = Math.floor(diff / 3600000)
      const days = Math.floor(diff / 86400000)
      
      if (minutes < 1) return '刚刚'
      if (minutes < 60) return `${minutes}分钟前`
      if (hours < 24) return `${hours}小时前`
      if (days < 7) return `${days}天前`
      
      return date.toLocaleDateString()
    },
    
    // 获取按钮文本
    getButtonText() {
      if (this.activityDetail.status !== 'active') {
        return this.activityDetail.statusText
      }
      if (!this.activityDetail.hasSlots) {
        return '拼单已满'
      }
      return '暂不可用'
    },
    
    // 返回上一页
    goBack() {
      smartBack('/pages/group-buying/group-buying')
    },
    
    // 跳转到我的订单
    goToMyOrders() {
      uni.redirectTo({
        url: '/pages/orders/orders?filter=pending'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.detail-container {
  min-height: 100vh;
  background: #f5f5f5;
  padding-bottom: 140rpx;
}

.status-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: #fff;
  z-index: 999;
}

.top-nav {
  position: fixed;
  top: var(--status-bar-height);
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 88rpx;
  background: #fff;
  padding: 0 30rpx;
  border-bottom: 1rpx solid #eee;
  z-index: 998;
  
  .nav-left {
    width: 60rpx;
    height: 60rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    
    .back-icon {
      font-size: 36rpx;
      color: #333;
      font-weight: bold;
    }
  }
  
  .nav-center {
    flex: 1;
    text-align: center;
    
    .nav-title {
      font-size: 32rpx;
      font-weight: 600;
      color: #333;
    }
  }
  
  .nav-right {
    width: 60rpx;
  }
}

.loading-container {
  margin-top: calc(var(--status-bar-height) + 88rpx);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 100rpx 0;
  
  .loading-text {
    font-size: 28rpx;
    color: #999;
  }
}

.detail-content {
  margin-top: calc(var(--status-bar-height) + 88rpx); // 状态栏 + 导航栏
  padding: 20rpx;
}

// 成团成功横幅
.success-banner {
  background: linear-gradient(135deg, #10b981 0%, #34d399 100%);
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  display: flex;
  align-items: center;
  gap: 20rpx;
  box-shadow: 0 8rpx 24rpx rgba(16, 185, 129, 0.3);
  
  .banner-icon {
    font-size: 60rpx;
  }
  
  .banner-content {
    flex: 1;
    
    .banner-title {
      display: block;
      font-size: 32rpx;
      font-weight: 700;
      color: #fff;
      margin-bottom: 8rpx;
    }
    
    .banner-subtitle {
      display: block;
      font-size: 24rpx;
      color: rgba(255, 255, 255, 0.9);
    }
  }
  
  .banner-btn {
    background: #fff;
    color: #10b981;
    padding: 16rpx 32rpx;
    border-radius: 25rpx;
    border: none;
    box-shadow: none;
    
    &::after {
      border: none;
    }
    
    .banner-btn-text {
      font-size: 26rpx;
      font-weight: 600;
      color: #10b981;
    }
  }
}

.status-card {
  background: linear-gradient(135deg, #ff4757 0%, #ff6b7a 100%);
  border-radius: 20rpx;
  padding: 40rpx;
  margin-bottom: 20rpx;
  
  .status-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30rpx;
    
    .status-badge {
      background: rgba(255, 255, 255, 0.3);
      padding: 10rpx 24rpx;
      border-radius: 25rpx;
      
      .status-text {
        font-size: 26rpx;
        color: #fff;
        font-weight: 600;
      }
    }
    
    .countdown {
      display: flex;
      align-items: center;
      
      .countdown-label {
        font-size: 24rpx;
        color: rgba(255, 255, 255, 0.9);
        margin-right: 8rpx;
      }
      
      .countdown-time {
        font-size: 28rpx;
        color: #fff;
        font-weight: 700;
      }
    }
  }
  
  .progress-section {
    .progress-info {
      margin-bottom: 15rpx;
      
      .progress-text {
        font-size: 28rpx;
        color: #fff;
        
        .highlight {
          font-size: 36rpx;
          font-weight: 700;
        }
      }
    }
    
    .progress-bar-wrapper {
      display: flex;
      align-items: center;
      gap: 20rpx;
      
      .progress-bar {
        flex: 1;
        height: 16rpx;
        background: rgba(255, 255, 255, 0.3);
        border-radius: 8rpx;
        overflow: hidden;
        
        .progress-fill {
          height: 100%;
          background: #fff;
          border-radius: 8rpx;
          transition: width 0.3s ease;
        }
      }
      
      .progress-percent {
        font-size: 28rpx;
        color: #fff;
        font-weight: 700;
        min-width: 80rpx;
        text-align: right;
      }
    }
  }
}

.food-card {
  background: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  display: flex;
  gap: 30rpx;
  
  .food-image {
    width: 200rpx;
    height: 200rpx;
    border-radius: 16rpx;
    background: #f0f0f0;
  }
  
  .food-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    
    .food-name {
      font-size: 32rpx;
      font-weight: 700;
      color: #333;
      margin-bottom: 10rpx;
    }
    
    .merchant-name {
      font-size: 26rpx;
      color: #999;
      margin-bottom: 20rpx;
    }
    
    .price-row {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      
      .group-price-section {
        .label {
          display: block;
          font-size: 22rpx;
          color: #999;
          margin-bottom: 6rpx;
        }
        
        .group-price {
          font-size: 40rpx;
          color: #ff4757;
          font-weight: 800;
        }
      }
      
      .original-price-section {
        text-align: right;
        
        .original-price {
          display: block;
          font-size: 24rpx;
          color: #999;
          text-decoration: line-through;
          margin-bottom: 4rpx;
        }
        
        .save-amount {
          display: block;
          font-size: 22rpx;
          color: #ff4757;
        }
      }
    }
  }
}

.activity-info-card, .participants-card {
  background: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  
  .card-title {
    font-size: 30rpx;
    font-weight: 700;
    color: #333;
    margin-bottom: 25rpx;
  }
  
  .info-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 20rpx 0;
    border-bottom: 1rpx solid #f0f0f0;
    
    &:last-child {
      border-bottom: none;
    }
    
    .info-label {
      font-size: 28rpx;
      color: #666;
      min-width: 150rpx;
    }
    
    .info-value {
      flex: 1;
      font-size: 28rpx;
      color: #333;
      text-align: right;
    }
  }
}

.participants-list {
  .participant-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx 0;
    border-bottom: 1rpx solid #f0f0f0;
    
    &:last-child {
      border-bottom: none;
    }
    
    &.empty {
      opacity: 0.5;
    }
    
    .participant-left {
      display: flex;
      align-items: center;
      gap: 20rpx;
      
      .participant-avatar {
        width: 80rpx;
        height: 80rpx;
        border-radius: 50%;
        background: #f0f0f0;
        
        &.placeholder {
          display: flex;
          align-items: center;
          justify-content: center;
          background: #f5f5f5;
          border: 2rpx dashed #ddd;
          
          .placeholder-icon {
            font-size: 36rpx;
            color: #ccc;
          }
        }
      }
      
      .participant-info {
        .participant-name {
          display: block;
          font-size: 28rpx;
          color: #333;
          font-weight: 600;
          margin-bottom: 6rpx;
          
          &.empty {
            color: #999;
          }
        }
        
        .participant-time {
          display: block;
          font-size: 22rpx;
          color: #999;
        }
      }
    }
    
    .participant-right {
      .badges {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 8rpx;
      }
      
      .participant-badge {
        background: #ff4757;
        color: #fff;
        padding: 8rpx 20rpx;
        border-radius: 20rpx;
        font-size: 22rpx;
        
        &.member {
          background: #f0f0f0;
          color: #666;
        }
      }
      
      .order-badge {
        background: #f0fdf4;
        color: #10b981;
        padding: 6rpx 16rpx;
        border-radius: 15rpx;
        font-size: 20rpx;
        border: 1rpx solid #d1fae5;
      }
    }
  }
}

.bottom-actions {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  padding: 20rpx 30rpx;
  border-top: 1rpx solid #eee;
  box-shadow: 0 -4rpx 12rpx rgba(0, 0, 0, 0.1);
  
  .action-btn {
    width: 100%;
    height: 96rpx;
    border-radius: 48rpx;
    border: none;
    font-size: 32rpx;
    font-weight: 700;
    
    &::after {
      border: none;
    }
    
    &.join-btn {
      background: linear-gradient(135deg, #ff4757 0%, #ff6b7a 100%);
      color: #fff;
      box-shadow: 0 8rpx 24rpx rgba(255, 71, 87, 0.3);
      
      &:active {
        transform: scale(0.98);
      }
    }
    
    &.leave-btn {
      background: #fff;
      color: #ff4757;
      border: 2rpx solid #ff4757;
      
      &:active {
        background: #fff5f5;
      }
    }
    
    &.cancel-btn {
      background: #fff;
      color: #999;
      border: 2rpx solid #e9ecef;
      
      &:active {
        background: #f8f9fa;
      }
    }
    
    &.disabled-btn {
      background: #f0f0f0;
      color: #999;
    }
    
    .btn-text {
      color: inherit;
    }
  }
}

/* ⭐ 口味选择半屏弹窗样式 */
.spice-modal-mask {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  animation: fadeIn 0.3s ease;
}

.spice-modal {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  border-top-left-radius: 24rpx;
  border-top-right-radius: 24rpx;
  box-shadow: 0 -10rpx 30rpx rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  z-index: 1001;
  max-height: 50vh;
  animation: slideUp 0.3s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

.spice-header {
  padding: 16rpx 24rpx 0;
  
  .drag-bar {
    width: 120rpx;
    height: 8rpx;
    background: #eaeaea;
    border-radius: 8rpx;
    margin: 0 auto 16rpx;
  }
  
  .spice-top {
    display: flex;
    gap: 20rpx;
    align-items: center;
    padding-bottom: 20rpx;
  }
  
  .spice-thumb {
    width: 160rpx;
    height: 160rpx;
    border-radius: 16rpx;
    background: #f0f0f0;
    flex-shrink: 0;
  }
  
  .spice-info-wrap {
    flex: 1;
    min-width: 0;
  }
  
  .spice-name {
    display: block;
    font-size: 32rpx;
    font-weight: 700;
    color: #333;
    margin-bottom: 12rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  
  .spice-price-row {
    display: flex;
    align-items: baseline;
    gap: 12rpx;
  }
  
  .spice-price-symbol {
    font-size: 28rpx;
    color: #ff4757;
    font-weight: 700;
  }
  
  .spice-price-value {
    font-size: 42rpx;
    color: #ff4757;
    font-weight: 800;
  }
  
  .spice-original {
    font-size: 24rpx;
    color: #999;
    text-decoration: line-through;
  }
}

.spice-body {
  padding: 20rpx 24rpx;
  flex: 1;
  overflow-y: auto;
  
  .spice-row {
    margin: 16rpx 0;
  }
  
  .spice-label {
    font-size: 28rpx;
    color: #333;
    font-weight: 600;
  }
  
  .spice-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 16rpx;
    margin-top: 16rpx;
  }
  
  .spice-chip {
    padding: 16rpx 32rpx;
    border-radius: 32rpx;
    background: #f5f5f5;
    color: #666;
    font-size: 28rpx;
    transition: all 0.3s ease;
    border: 2rpx solid transparent;
    
    &.active {
      background: linear-gradient(135deg, #ffe6e8 0%, #fff5f5 100%);
      color: #ff4757;
      border-color: #ff4757;
      font-weight: 600;
      transform: scale(1.05);
    }
  }
}

.spice-footer {
  padding: 16rpx 24rpx 24rpx;
  
  .spice-confirm-btn {
    width: 100%;
    height: 88rpx;
    border-radius: 44rpx;
    border: none;
    background: linear-gradient(135deg, #ff4757 0%, #ff6b7a 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8rpx 24rpx rgba(255, 71, 87, 0.3);
    transition: transform 0.2s ease;
    
    &::after {
      border: none;
    }
    
    &:active {
      transform: scale(0.98);
    }
    
    .spice-confirm-text {
      font-size: 32rpx;
      color: #fff;
      font-weight: 700;
    }
  }
}
</style>

